<template>
  <el-tree
    :data="menu"
    :props="defaultProps"
    :expand-on-click-node="false"
    show-checkbox
    node-key="catId"
  >
    <span
      class="custom-tree-node"
      slot-scope="{ node, data }"
    >
      <span>{{ node.label }}</span>
      <span>
        <el-button
        v-if="node.level<=2"
          type="text"
          size="mini"
          @click="() => append(data)"
        >
          Append
        </el-button>
        <el-button
        v-if="node.childNodes.length==0"
          type="text"
          size="mini"
          @click="() => remove(node, data)"
        >
          Delete
        </el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      menu: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dataListLoading: false
    }
  },
  methods: {
    getMenu () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/product/category/list'),
        method: 'get'
      }).then(({ data }) => {
        this.menu = data.data
      })
    },
    append (data) {
      console.log(data)
    },
    remove (node, data) {
      console.log(node, data)
    }
  },
  created () {
    this.getMenu()
  }
}
</script>
<style scoped>
</style>